更：

如果上線的網站是純靜態，不需打任何api，才適合用 github pages 部署！

部署步驟

1. 首先要建立一個 github repo，且要把專案 git push -u origin main 推上去
2. 在本地安裝部署工具

   npm install --save-dev gh-pages
   

3. 修改 nuxt.config.ts

   export default defineNuxtConfig({
   	app: {
   		baseURL: '/my-portfolio/', // 要和repo名稱一模一樣
   		buildAssetsDir: '/static/' // 打包後靜態資源（JS、CSS、圖片）的資料夾名稱
   	},
   	 nitro: {
       preset: 'github_pages', // 為GitHub Pages做優化打包
       prerender: {
         routes: ['/'], // 指定要預渲染 (prerender)的頁面
       }
     },
     routeRules: {
       '/**': { prerender: true } // 告訴Nuxt所有路由都要prerender
     },
   })
   

4. 加上 public/.nojekyll 空白檔案
5. 修改 package.json

   {
   	"scripts": {
   	"build": "nuxt build",
   	"generate": "nuxt generate",
   	"deploy": "gh-pages --dotfiles -d .output/public"
   	}
   }
   

6. 產生靜態檔案
   Nuxt 會輸出靜態檔到 .output/public

   npm run generate
   

7. 部署到 GitHub Pages
   這會自動把 .output/public 推到 GitHub 的 gh-pages branch

   npm run deploy
   

！小坑而已！
每次有改動程式碼，都要記得先 git push 上去，再重複第 5. 6 步驟，不然怎麼推都會是舊的程式碼。媽蛋我忘記推，然後狂 depoly 想說為什麼沒有！

！大坑來了！
注意 github pages 限制

1. 需要是 public repo
2. 一個 github 帳號只能有一個 github pages的網站
   如果過去有部署過，就得把以前的網站撤掉，在新的 repo 中設定新的 pages 才行～可以去repo>setting>pages 查看相關設定

設定 Source：Deploy from a branch
設定 Branch：gh-pages /root

！大坑來了！
我重複 deploy 好幾次，但是都會有 img 和 css 404，而且只是有些圖片，css 也有某幾個顏色跑掉，WHY ??????

發現在 npm run generate 時是產生靜態檔案，靜態檔案的路徑和當初寫的路徑不一樣，在 devtool上看到圖片設定的路徑是 src="/my-portfolio-2025/ipx//images/intro-pic.png"

⇒ 所以就回頭看了 .output/public ，發現在 .output/public/_ipx 中有缺少圖片，把原本放在根目錄的 public/images 補進 .output/public/_ipx 就沒有少圖了

css 某幾個顏色跑掉，我猜是因為在設定 app.scss 時，有幾個 class 可能和 vuetify 原生的 class重疊了，我設定的 bg-yellow 都變成了其他黃色！

⇒ 所以我就把 app.scss 的 class 名稱改成 bg-main-yellow 就顯示出我喜歡的黃色了！

！小坑而已！
今天遇到很多坑，而且 GPT 還是 copilot 老師給我的方法都沒有效，快氣死，後來是靠 Claire 老師 救我的！

所以啊，太依靠 AI 也不一定可行，試很多次無果就該換條路走！提醒自己！